import React, { useCallback, useEffect, useMemo, useState } from 'react'

import {
  Button,
  Row,
  Col,
} from 'antd';
import { EditFilled } from '@ant-design/icons';

// router
import { useNavigate, useLocation } from 'react-router-dom';

// redux
import { useSelector } from 'react-redux';

// axios
import { getStaffOfId } from '../../api/user';

import qs from 'qs'

export default function StaffInfo() {

  // 路由
  const nav = useNavigate()

  // location
  const location = useLocation()

  // 获取 search中的id
  const [staffId, setStaffId] = useState(location.search)

  // 获取 token
  const token = useSelector((state) => state.user.token)

  // 获取 权限等级
  const permissions = useSelector((state) => state.user.permissions)

  // 员工数据
  const [staffData, setStaffData] = useState({})

  // 职位数组
  const [office, setOffice] = useState(['实习员工', '正式员工', '经理', '店长'])

  // 计算工作时间
  const jobDay = useCallback((timeData) => {
    // 设置入职时间
    const start = new Date(timeData)
    // 设置 1 天的参数 单位：毫秒
    const oneDay = 1000 * 60 * 60 * 24
    // 获取现在的时间
    const now = new Date()
    // 计算差值并得到时间，向下取整
    const day = Math.floor(((now.getTime() - start.getTime()) / oneDay))
    // 返回结果
    return day
  }, [])

  // didMount 后加载数据
  useEffect(() => {
    // 利用 qs 解析 search 参数
    const query = qs.parse(staffId, { ignoreQueryPrefix: true })
    // 利用函数查询内容
    const getStaffData = async() => {
      const res = await getStaffOfId(query.id)
      // 设置数据
      setStaffData(res)
    }
    // 调用函数
    getStaffData()
  }, [])

  return (
    <>
      <Row>
        <Col span={8} style={{textAlign: 'center'}}>
          <Button type="link" onClick={() => {nav(-1)}}>返回上一级</Button>
        </Col>
        <Col span={8} offset={8}  style={{textAlign: 'center'}}>
          {staffData.token
            ? (staffData.token === token || permissions === 3)
              ? (
                <Button type="primary" icon={<EditFilled />}>
                  修改
                </Button>
              )
              : ''
            : ''
          }
        </Col>
      </Row>
      <Row style={{boxSizing: 'border-box', padding: 20}}>
        <Col span={16} offset={4}>
          <article className="media">
            <figure className="media-left">
              <p className="image is-64x64">
                <img src={staffData.image ? staffData.image : 'https://bulma.io/images/placeholders/128x128.png'} />
              </p>
            </figure>
            <div className="media-content">
              <div className="content">
                <p>
                  <strong>
                    {staffData.name ? staffData.name : '默认名字'}
                  </strong>
                  <small> {staffData.permissions ? `  #${office[staffData.permissions]}` : ''}</small>
                </p>
                <div className="box">
                    登陆账户：{staffData.username ? staffData.username : '默认显示'}
                </div>
                <div className="box">
                    性别：{staffData.sex ? staffData.sex : '暂无数据'}
                </div>
                <div className="box">
                    生日：{staffData.birthday ? staffData.birthday : '暂无数据'}
                </div>
                <div className="box">
                    入职时间：{staffData.jobStartDate ? staffData.jobStartDate : '暂无数据'}
                </div>
                <div className="box">
                    累积工作时间：{staffData.jobStartDate ? `${jobDay(staffData.jobStartDate)}天` : '0天'}
                </div>
              </div>
            </div>
          </article>
        </Col>
      </Row>
    </>
  )
}
